<template>
    <Header ></Header>
  <List></List>
    <Footer ></Footer>
</template>

<script>
import Header from "./components/Header.vue"
import List from "./components/List.vue"
import Footer from "./components/Footer.vue"

import {reactive, provide, computed} from "vue";

export default {
  setup() {
    let todo_list = reactive([{"text": "Vue", "finished": false},
      {"text": "Flutter", "finished": true},
      {"text": "React", "finished": false}]
    )


    const deleteItemAtIndex = (index) => {
      todo_list.splice(index, 1)
    }
    const setFinishedByIndex = (index, finished) => {
      todo_list[index].finished = finished
    }
    const addTodo = (todo) => {
      todo_list.unshift(todo)
    }
    const selectAllTodos = (isSelected) => {
      todo_list.forEach((todo) => {
        todo.finished = isSelected
      })
      console.log(todo_list)
    }

    const clearFinishedTodo = () => {
      console.log(todo_list)

      for (let i = todo_list.length-1; i >= 0; i--) {

        if(todo_list[i].finished){
          todo_list.splice(i,1)
        }
      }
    }

   let finishedCount = computed(()=>{
     let count = 0;
     todo_list.forEach(function (todo) {
       if (todo.finished) {
         count++;
       }
     })
     return count
   })

    provide("todoList",todo_list)
    provide("deleteItemAtIndex",deleteItemAtIndex)
    provide("setFinishedByIndex",setFinishedByIndex)
    provide("addTodo",addTodo)
    provide("selectAllTodos",selectAllTodos)
    provide("clearFinishedTodo",clearFinishedTodo)
    provide("finishedCount",finishedCount)


  },


  components: {
    Header,
    List,
    Footer,

  }
}


</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
